<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%
	String path = request.getContextPath();
	String basePath = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort()
			+ path + "/";
%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<base href="<%=basePath%>">

<title>数据包列表</title>

<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="expires" content="0">
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="This is my page">

<!-- <script
	src="http://cdn.static.runoob.com/libs/jquery/2.2.1/jquery.min.js">  </script> -->
<script src="static/js/jquery-2.1.1.min.js"></script>
	
<style>
* {
	margin: 0;
	padding: 0;
}

#divBody{
	width:100%;
	height:1000px;
	background: #ededed; 
}
#tableBookList{
	width:100%;
}
#tableBookList td {
	width:14%;
	background:#ccc5c5;
	text-align:center;
}

.search-box{
	width:100px;
}
/* #divButton span{
    display:block;
	float:right;
} */

#divButton button{
	float:right;
}

.borrowId{
	display:none;
}

#form{
	display:none;
}

</style>


<!-- 按钮样式 -->
<style type="text/css"> 
/* body { 
background: #ededed; 
width: 900px; 
margin: 30px auto; 
color: #999; 
} */ 
p { 
margin: 0 0 2em; 
} 
h1 { 
margin: 0; 
} 
a { 
color: #339; 
text-decoration: none; 
} 
a:hover { 
text-decoration: underline; 
} 
div { 
padding: 20px 0; 
border-bottom: solid 1px #ccc; 
} 
/* button 
---------------------------------------------- */ 
.button { 
display: inline-block; 
zoom: 1; /* zoom and *display = ie7 hack for display:inline-block */ 
*display: inline; 
vertical-align: baseline; 
margin: 0 2px; 
outline: none; 
cursor: pointer; 
text-align: center; 
text-decoration: none; 
font: 14px/100% Arial, Helvetica, sans-serif; 
padding: .5em 2em .55em; 
text-shadow: 0 1px 1px rgba(0,0,0,.3); 
-webkit-border-radius: .5em; 
-moz-border-radius: .5em; 
border-radius: .5em; 
-webkit-box-shadow: 0 1px 2px rgba(0,0,0,.2); 
-moz-box-shadow: 0 1px 2px rgba(0,0,0,.2); 
box-shadow: 0 1px 2px rgba(0,0,0,.2); 
} 
.button:hover { 
text-decoration: none; 
} 
.button:active { 
position: relative; 
top: 1px; 
} 
.bigrounded { 
-webkit-border-radius: 2em; 
-moz-border-radius: 2em; 
border-radius: 2em; 
} 
.medium { 
font-size: 12px; 
padding: .4em 1.5em .42em; 
} 
.small { 
font-size: 11px; 
padding: .2em 1em .275em; 
} 
/* color styles 
---------------------------------------------- */ 
/* black */ 
.black { 
color: #d7d7d7; 
border: solid 1px #333; 
background: #333; 
background: -webkit-gradient(linear, left top, left bottom, from(#666), to(#000)); 
background: -moz-linear-gradient(top, #666, #000); 
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#666666', endColorstr='#000000'); 
} 
.black:hover { 
background: #000; 
background: -webkit-gradient(linear, left top, left bottom, from(#444), to(#000)); 
background: -moz-linear-gradient(top, #444, #000); 
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#444444', endColorstr='#000000'); 
} 
.black:active { 
color: #666; 
background: -webkit-gradient(linear, left top, left bottom, from(#000), to(#444)); 
background: -moz-linear-gradient(top, #000, #444); 
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#000000', endColorstr='#666666'); 
} 
/* gray */ 
.gray { 
color: #e9e9e9; 
border: solid 1px #555; 
background: #6e6e6e; 
background: -webkit-gradient(linear, left top, left bottom, from(#888), to(#575757)); 
background: -moz-linear-gradient(top, #888, #575757); 
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#888888', endColorstr='#575757'); 
} 
.gray:hover { 
background: #616161; 
background: -webkit-gradient(linear, left top, left bottom, from(#757575), to(#4b4b4b)); 
background: -moz-linear-gradient(top, #757575, #4b4b4b); 
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#757575', endColorstr='#4b4b4b'); 
} 
.gray:active { 
color: #afafaf; 
background: -webkit-gradient(linear, left top, left bottom, from(#575757), to(#888)); 
background: -moz-linear-gradient(top, #575757, #888); 
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#575757', endColorstr='#888888'); 
} 
/* white */ 
.white { 
color: #606060; 
border: solid 1px #b7b7b7; 
background: #fff; 
background: -webkit-gradient(linear, left top, left bottom, from(#fff), to(#ededed)); 
background: -moz-linear-gradient(top, #fff, #ededed); 
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#ededed'); 
} 
.white:hover { 
background: #ededed; 
background: -webkit-gradient(linear, left top, left bottom, from(#fff), to(#dcdcdc)); 
background: -moz-linear-gradient(top, #fff, #dcdcdc); 
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#dcdcdc'); 
} 
.white:active { 
color: #999; 
background: -webkit-gradient(linear, left top, left bottom, from(#ededed), to(#fff)); 
background: -moz-linear-gradient(top, #ededed, #fff); 
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ededed', endColorstr='#ffffff'); 
} 
/* orange */ 
.orange { 
color: #fef4e9; 
border: solid 1px #da7c0c; 
background: #f78d1d; 
background: -webkit-gradient(linear, left top, left bottom, from(#faa51a), to(#f47a20)); 
background: -moz-linear-gradient(top, #faa51a, #f47a20); 
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#faa51a', endColorstr='#f47a20'); 
} 
.orange:hover { 
background: #f47c20; 
background: -webkit-gradient(linear, left top, left bottom, from(#f88e11), to(#f06015)); 
background: -moz-linear-gradient(top, #f88e11, #f06015); 
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#f88e11', endColorstr='#f06015'); 
} 
.orange:active { 
color: #fcd3a5; 
background: -webkit-gradient(linear, left top, left bottom, from(#f47a20), to(#faa51a)); 
background: -moz-linear-gradient(top, #f47a20, #faa51a); 
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#f47a20', endColorstr='#faa51a'); 
} 
/* red */ 
.red { 
color: #faddde; 
border: solid 1px #980c10; 
background: #d81b21; 
background: -webkit-gradient(linear, left top, left bottom, from(#ed1c24), to(#aa1317)); 
background: -moz-linear-gradient(top, #ed1c24, #aa1317); 
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ed1c24', endColorstr='#aa1317'); 
} 
.red:hover { 
background: #b61318; 
background: -webkit-gradient(linear, left top, left bottom, from(#c9151b), to(#a11115)); 
background: -moz-linear-gradient(top, #c9151b, #a11115); 
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#c9151b', endColorstr='#a11115'); 
} 
.red:active { 
color: #de898c; 
background: -webkit-gradient(linear, left top, left bottom, from(#aa1317), to(#ed1c24)); 
background: -moz-linear-gradient(top, #aa1317, #ed1c24); 
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#aa1317', endColorstr='#ed1c24'); 
} 
/* blue */ 
.blue { 
color: #d9eef7; 
border: solid 1px #0076a3; 
background: #0095cd; 
background: -webkit-gradient(linear, left top, left bottom, from(#00adee), to(#0078a5)); 
background: -moz-linear-gradient(top, #00adee, #0078a5); 
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#00adee', endColorstr='#0078a5'); 
} 
.blue:hover { 
background: #007ead; 
background: -webkit-gradient(linear, left top, left bottom, from(#0095cc), to(#00678e)); 
background: -moz-linear-gradient(top, #0095cc, #00678e); 
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#0095cc', endColorstr='#00678e'); 
} 
.blue:active { 
color: #80bed6; 
background: -webkit-gradient(linear, left top, left bottom, from(#0078a5), to(#00adee)); 
background: -moz-linear-gradient(top, #0078a5, #00adee); 
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#0078a5', endColorstr='#00adee'); 
} 
/* rosy */ 
.rosy { 
color: #fae7e9; 
border: solid 1px #b73948; 
background: #da5867; 
background: -webkit-gradient(linear, left top, left bottom, from(#f16c7c), to(#bf404f)); 
background: -moz-linear-gradient(top, #f16c7c, #bf404f); 
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#f16c7c', endColorstr='#bf404f'); 
} 
.rosy:hover { 
background: #ba4b58; 
background: -webkit-gradient(linear, left top, left bottom, from(#cf5d6a), to(#a53845)); 
background: -moz-linear-gradient(top, #cf5d6a, #a53845); 
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#cf5d6a', endColorstr='#a53845'); 
} 
.rosy:active { 
color: #dca4ab; 
background: -webkit-gradient(linear, left top, left bottom, from(#bf404f), to(#f16c7c)); 
background: -moz-linear-gradient(top, #bf404f, #f16c7c); 
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#bf404f', endColorstr='#f16c7c'); 
} 
/* green */ 
.green { 
color: #e8f0de; 
border: solid 1px #538312; 
background: #64991e; 
background: -webkit-gradient(linear, left top, left bottom, from(#7db72f), to(#4e7d0e)); 
background: -moz-linear-gradient(top, #7db72f, #4e7d0e); 
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#7db72f', endColorstr='#4e7d0e'); 
} 
.green:hover { 
background: #538018; 
background: -webkit-gradient(linear, left top, left bottom, from(#6b9d28), to(#436b0c)); 
background: -moz-linear-gradient(top, #6b9d28, #436b0c); 
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#6b9d28', endColorstr='#436b0c'); 
} 
.green:active { 
color: #a9c08c; 
background: -webkit-gradient(linear, left top, left bottom, from(#4e7d0e), to(#7db72f)); 
background: -moz-linear-gradient(top, #4e7d0e, #7db72f); 
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#4e7d0e', endColorstr='#7db72f'); 
} 
/* pink */ 
.pink { 
color: #feeef5; 
border: solid 1px #d2729e; 
background: #f895c2; 
background: -webkit-gradient(linear, left top, left bottom, from(#feb1d3), to(#f171ab)); 
background: -moz-linear-gradient(top, #feb1d3, #f171ab); 
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#feb1d3', endColorstr='#f171ab'); 
} 
.pink:hover { 
background: #d57ea5; 
background: -webkit-gradient(linear, left top, left bottom, from(#f4aacb), to(#e86ca4)); 
background: -moz-linear-gradient(top, #f4aacb, #e86ca4); 
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#f4aacb', endColorstr='#e86ca4'); 
} 
.pink:active { 
color: #f3c3d9; 
background: -webkit-gradient(linear, left top, left bottom, from(#f171ab), to(#feb1d3)); 
background: -moz-linear-gradient(top, #f171ab, #feb1d3); 
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#f171ab', endColorstr='#feb1d3'); 
} 
</style>


</head>
<script type="text/javascript">
	//加载 班级学生
	function LoadData(currentPage,showCount) {
		var pageParam=new Object();
		var page=new Object();
		page.showCount = showCount;
		page.currentPage = currentPage;
	
		pageParam.page = page;
		/* alert(JSON.stringify(param)); */
		
		//请求数据
		$.ajax({
			type : 'POST',
			url : '/network_monitoring_system/net/detect/pack/listpage',
			data :JSON.stringify(pageParam),
			success : function(data) {
				var packageList = data.data.objects;
				page = data.data.page;
				 /* alert(JSON.stringify(packageList[0]));
				 alert(JSON.stringify(page)); */
				var tableData = "";
				//表头
				
				 tableData += "<tr>" + "<td >" + "编号" + "</td>" + "<td>" + "协议" +"</td>"+ "<td>" + "源IP" +"</td>"+ "<td>" + "目的IP" +"</td>"+ "<td>" + "源端口" +"</td>" + "<td>" + "目的端口" +"</td>" + "<td>" + "时间" +"</td>" + "</tr>";
				
				 var pack;
				 var protocol;
				for(var i = 0; i < packageList.length; i ++){/*  */
					pack = packageList[i];
					protocol = "";
					if(pack.net_protocol != null && pack.net_protocol != ''){
						protocol += pack.net_protocol;
					}
					
					if(pack.tra_protocol != null && pack.tra_protocol != ''){
						protocol += " | " + pack.tra_protocol;
					}
					
					if(pack.app_protocol != null && pack.app_protocol != ''){
						protocol += " | " + pack.app_protocol;
					}
					tableData += "<tr>" + "<td class='packageId'>" + pack.id + "</td>" + "<td >" + protocol + "</td>" + "<td>" + pack.src_ip +"</td>"+ "<td>" + pack.dst_ip +"</td>"+ "<td>" + pack.src_port +"</td>"+ "<td>" + pack.dst_port +"</td>" +  "<td>" + dateFormat(new Date(pack.create_time),"yyyy/MM/dd hh:mm:ss") + "</tr>";
				}
				//书籍信息
				
				$("#tableBookList").html(tableData);
				$("#currentPage").html(page.currentPage);
				$("#showCount").html(page.showCount);
				$("#totalPage").html(page.totalPage);
				$("#totalResult").html(page.totalResult);
				
				 
			},
			contentType:"application/json",
			dataType : "json"
		});

		
	};
	

function dateFormat(date,fmt){
	  var o = {   
	    "M+" : date.getMonth()+1,
	    "d+" : date.getDate(),
	    "h+" : date.getHours(),
	    "m+" : date.getMinutes(),
	    "s+" : date.getSeconds(),
	    "q+" : Math.floor((date.getMonth()+3) / 3),
	    "S"  : date.getMilliseconds()
	  };
	  if(/(y+)/.test(fmt))
	    fmt=fmt.replace(RegExp.$1, (date.getFullYear()+"").substr(4 - RegExp.$1.length));
	  for(var k in o)
	    if(new RegExp("("+ k +")").test(fmt))
	  fmt = fmt.replace(RegExp.$1, (RegExp.$1.length==1) ? (o[k]) : (("00"+ o[k]).substr((""+ o[k]).length)));
	  return fmt;
	};
	
	function jumpPage(flag,showCount){
		var currentPage = $("#currentPage").text();
		var totalPage = $("#totalPage").text();
		//上一页
		if(flag == 1 && currentPage > 1){
			currentPage --;
		}else{
			currentPage ++;
		}
		
		$("#tableBookList").html("");
		
		LoadData(currentPage,showCount);
		
	};
	
	
</script>
<body>
	<div id="divBody">
		<div id="divBookList">
			<table id="tableBookList">
				<!-- 加载数据后自动填充 -->
			</table>
		</div>
		
		<div id="divButton">
			
			<button type="button" onclick="jumpPage(2,27)" class="button white bigrounded">下一页</button>
			<button type="button" onclick="jumpPage(1,27)" class="button white bigrounded">上一页</button>
			<button type="button" onclick="LoadData(1,27)" class="button white bigrounded">第一页</button>
			<span>第<span id="currentPage"></span>页</span>
			<span>每页<span id="showCount"></span>条</span> 
			<span>共<span id="totalPage"></span>页</span>
			<span>共<span id="totalResult"></span>条</span>
			
			
			
		</div>
		<form name="form" id="form" method="post">
			<input id="detail-param-id" type="text" value="" name="borrowId"/>
		</form>
	</div>

</body>
</html>